
var vm = new Vue({
    el: '#app',
    data() {
        //这里存放数据
        return {
            dataSource: accountList,
            tableData: [],
            query: {
                url: '',
                username: '',
            }
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        editableTabs: {
            handler(newValue, oldValue) {
                console.log(`index.js 26`, newValue);
                localStorage.setItem('noteData', JSON.stringify(newValue))
            },
            deep: true
        }
    },
    //方法集合
    methods: {
        initData() {
            this.tableData = _.cloneDeep(this.dataSource)
            // url去重
            this.dataSourceURL = _.uniqBy(this.tableData, 'url')
            // username去重
            this.dataSourceUsername = _.uniqBy(this.tableData, 'username')
        },
        getSearch() {
            let { url, username } = this.query
            console.log(`getSearch ~ this.query`, this.query);
            this.tableData = _.cloneDeep(this.dataSource)
            // 筛选数组
            if (url) {
                this.tableData = _.filter(this.tableData, (item) => {
                    return item.url.indexOf(url) > -1
                })
            }
            if (username) {
                console.log(`getSearch ~ username`, username);
                this.tableData = _.filter(this.tableData, (item) => {
                    return item.username.indexOf(username) > -1
                })
            }
            console.log(`this.tableData=_.filter ~ this.tableData`, this.tableData);
        },
        handleOpen(url) {
            // 打开新窗口
            window.open(url)
        },  // 复制
        handleCopy(index, data) {
            // 存储传递过来的数据
            let copyText = data;
            // 创建一个input 元素
            // createElement() 方法通过指定名称创建一个元素
            let newInput = document.createElement("input");
            // 讲存储的数据赋值给input的value值
            newInput.value = copyText;
            // appendChild() 方法向节点添加最后一个子节点。
            document.body.appendChild(newInput);
            // 选中input元素中的文本
            // select() 方法用于选择该元素中的文本。
            newInput.select();
            // 执行浏览器复制命令
            //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
            document.execCommand("Copy");
            // 清空输入框
            newInput.remove();
            // 下面是element的弹窗 不需要的自行删除就好
            this.$message({
                message: "复制成功",
                type: "success",
            });
        },
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(`index.js 100`, '密码', accountList);
        this.initData()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
});


